package myJs.admin.companyMemeberManage

import myJs.Implicits._
import myJs.cps._
import myJs.myPkg._
import myJs.myPkg.jquery.$
import myJs.tool.Pojo.CompanyMember
import myJs.tool.Tool
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.concurrent.Future
import scala.scalajs.js
import com.softwaremill.quicklens._

/**
 * Created by yz on 21/1/2022
 */
@react object ModifyCp {

  case class Props(refreshTableB: () => Future[Unit], show: Boolean = false, showChange: Boolean => Unit,
                   companyMember:CompanyMember,companyMemberChange: CompanyMember => Unit)

  val component = FunctionalComponent[Props] { props =>

    val formRef = React.createRef[html.Form]

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

      def bootstrapValidator = {
        val url = "http://localhost:9000/panda/admin/member/accountCheck"
        val formJq = $(formRef.current)
        val dict: js.Dictionary[js.Any] = js.Dictionary(
          "feedbackIcons" -> js.Dictionary(
            "valid" -> "glyphicon glyphicon-ok",
            "invalid" -> "glyphicon glyphicon-remove",
            "validating" -> "glyphicon glyphicon-refresh",
          ),
          "fields" -> js.Dictionary(
            "password" -> js.Dictionary(
              "validators" -> js.Dictionary(
                "notEmpty" -> js.Dictionary(
                  "message" -> "密码不能为空！"
                ),
              )
            ),
            "companyName" -> js.Dictionary(
              "validators" -> js.Dictionary(
                "notEmpty" -> js.Dictionary(
                  "message" -> "公司名称不能为空！"
                ),
              )
            ),
          )
        )
        formJq.bootstrapValidator(dict)
      }

      def update = () => {
        val formJq = $(formRef.current)
        val bv = formJq.bv
        bv.validate()
        val valid = bv.isValid()
        if (valid) {
          val index = layer.alert(Tool.myElement, Tool.layerOptions)
          val url = "http://localhost:9000/panda/admin/companyMember/update"
          val formData = formJq.serialize()
          MyFetch.post(url = s"${url}", data = formData, headers = Map("Content-Type" -> "application/x-www-form-urlencoded"),
          ).map { xhr =>
            props.refreshTableB().map { x =>
              layer.close(index)
              props.showChange(false)
              swal(SwalOptions(title = "成功", text = "修改成功!", `type` = "success"))
            }
          }
        }
        ()
      }

      def passwordChange=(v:String)=>{
        props.companyMemberChange(props.companyMember.modify(_.password).setTo(v))
      }

      def companyNameChange=(v:String)=>{
        props.companyMemberChange(props.companyMember.modify(_.companyName).setTo(v))
      }

    }

    useEffect(() => {
      if (props.show) {
        FTool.bootstrapValidator
      }
    }, List(props.show)
    )

    Modal(onHide = FTool.handleClose, show = props.show, dialogClassName = "addModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          i(className := "fa fa-edit"),
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", " 修改")
        )
      ),
      Modal.Body(
        form(id := "form", data - "toggle" := "validator", className := "form-horizontal", ref := formRef,
          div(className := "row-fluid",
            InputInlineCp(label = "账号", name = "account", labelWidth = 2, inputWidth = 6,
              readOnly = true, value = props.companyMember.account),
            InputInlineCp(label = "密码", name = "password", labelWidth = 2, inputWidth = 6, value = props.companyMember.password,
              onChange = FTool.passwordChange),
            InputInlineCp(label = "公司名称", name = "companyName", labelWidth = 2, inputWidth = 8,
              value = props.companyMember.companyName, onChange = FTool.companyNameChange),
          )
        )
      ),
      Modal.Footer(bsPrefix = "modal-footer bg-info")(
        button(`type` := "button", className := "btn blue myAdd", "确定", onClick := FTool.update),
        button(`type` := "button", className := "btn green", data - "dismiss" := "modal", "取消",
          onClick := FTool.handleClose),
      )

    )

  }


}
